@import "~styles/variables.scss";
@import "~styles/mixin.scss";

.user-card--body{
	background: $bgColor;
	.user-card--title{
		padding: 1rem;
		.user-card--info{
			margin-bottom: 0.133rem;
			@include boxShadow(8px)
			width: 100%;
			padding: 1.0rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			height: 5.8rem;
			img{
				width: 2.667rem;
				height: 2.667rem;
				border-radius: 50%;
				margin-right: 0.667rem;
			}
			.inline-block{
				font-size: $fontSizeBigger;
			}
			.text-center{
				text-align: left;
				padding-left: 3.333rem; 
				font-size: $fontSizeLittle;
				color: $ColorLight;
			}
		}
		.user-card--name{
			@include boxShadow(8px)
			width: 100%;
			padding: 1rem;
			box-sizing: border-box;
			height: 3rem;
			display: flex;
			font-size: $fontSizeLittle;
			line-height: 1rem;
			justify-content: space-between;
			i{
				color: $ColorLight;
			}
		}
	}
	.user-card--img{
		padding: 1rem;
		padding-top: 0;
		.img-group{
			width: 100%;
			height: 23rem;
			@include boxShadow(8px);
			display: flex;
			flex-direction: column;
			justify-content: center;
			img{
				margin: 0 auto;
				@include boxShadow(0px);
				width: 9.333rem;
				height: 9.333rem;
			}
			span{
				margin-top: 0.667rem;
				font-size: $fontSizeMini;
				color: $ColorHighLight;
				display: block;
				width: 100%;
				text-align: center;
			}
		}
	}
	.switch-tap{
		margin:0.667rem 0;
		.active{
			border-bottom: 2px solid $majorBlue;
		}
	}
}